<template>
  <div class="my-site-site-card-with-options">
    <div class="site-card-container">
      <!-- <div class="site-card-container-header">
        <span class="client-type">H5</span>
        <span class="status draft">草稿</span>
      </div> -->
      <div class="site-card-container-thumbnail">
        <el-image style="width: 100%" v-if="item.piclink" :src="item.piclink" fit="fill"></el-image>
        <img v-else class="vi vi-image-load-img" src="https://wutong.bj.bcebos.com/toolKit/empty_site_snap.png" />
      </div>
      <!-- <span class="indextag" v-if="item.is_home == 1">
        <i class="el-icon-s-home"></i>当前首页</span
      >
      <div class="delicon" v-if="item.is_home != 1">
        <span @click="setindex"> <i class="el-icon-s-tools"></i>设为首页</span>
      </div> -->
      <div class="site-card-container-site-footer-wrap">
        <div class="site-card-container-site-footer-wrap-top">
          <div class="site-card-container-site-footer-wrap-site">
            <span class="site-card-container-site-name" :title="item.title" style="width: 100%">{{ item.title }}</span>
          </div>
        </div>
        <div class="site-card-container-site-footer-wrap-top">
          <div class="site-card-container-site-footer-wrap-site">
            <span class="site-card-container-site-name" :title="item.iden" style="width: 100%">iden：{{ item.iden }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="my-site-options-container">
      <span class="my-site-options-item" @click="toShow(item)" v-if="item.piclink"> <span class="my-site-chakan iconfont iconchakan1"></span>预览 </span>
      <span class="my-site-options-item" @click="toEdit"> <span class="my-site-chakan iconfont iconchakan1"></span>编辑 </span>
      <span class="my-site-options-item" @click="copy(item)"> <span class="my-site-chakan iconfont iconchakan1"></span>复制 </span>
      <span class="my-site-options-item" @click="toDel"> <span class="my-site-bianji iconfont iconbianji3"></span>删除 </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    urlHeader: {
      type: String,
      default: "",
    },
  },
  components: {},
  data() {
    return {
      srcList: [],
    };
  },
  created() {},
  mounted() {},
  methods: {
    setindex() {
      this.$confirm(`是否设置模版“${this.item.title}”为首页？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.getPage.setindexHome({ id: this.item.id }).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "设置成功",
              });
              this.$emit("refresh");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    copy(item) {
      this.$emit("copymodule", item);
    },
    gotolink(iden) {
      const URL = this.urlHeader + "/pages/home/index/index?iden=" + iden;
      window.open(URL, "_blank");
    },
    toShow(item) {
      if (item.id == 5) {
        item.iframeurl = this.urlHeader + "/pages/home/index/index?iden=" + item.iden;
      } else {
        item.iframeurl = this.urlHeader + "/pages/sub/theme/theme?iden=" + item.iden;
      }
      this.$emit("confirmitem", item);
    },
    toDel() {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          this.$emit("sendDel", this.item.id);
        } else if (willDelete.dismiss == "cancel") {
          this.$swal("已取消", "您取消了删除操作", "error");
        }
      });
    },
    toEdit() {
      // sessionStorage.setItem("title", this.$store.state.title);
      // sessionStorage.setItem("parentTitle", this.$store.state.parentTitle);
      let routeData = this.$router.resolve({
        path: "/index/page/module",
        query: { id: this.item.id, iden: this.item.iden },
      });
      window.open(routeData.href, "_blank");
    },
  },
};
</script>

<style scoped lang="less">
.my-site-options-item-img {
  position: absolute;
  // opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.my-site-site-card-with-options {
  display: inline-block;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  // overflow: hidden;
  margin: 0 15px 15px 0;
}
.site-card-container {
  position: relative;
  display: inline-block;
  width: 260px;
}
.site-card-container-header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.site-card-container-thumbnail {
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.site-card-container-site-footer-wrap {
  display: flex;
  flex-direction: column;
  padding: 5px 10px 10px;
  line-height: 28px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.site-card-container-header .client-type,
.site-card-container-header .status {
  position: absolute;
  top: 10px;
  display: inline-block;
  height: 28px;
  padding: 0 10px;
  line-height: 28px;
  border-radius: 3px;
  font-size: 12px;
  color: #fff;
  font-family: PingFangSC-Regular, serif;
}
.site-card-container-header .client-type {
  left: 10px;
  background: #63ce81;
}
.site-card-container-header .status.draft {
  background: #ff9473;
}
.site-card-container-header .status {
  right: 10px;
}
.vi-image-load-img {
  font-weight: 300;
  line-height: 2;
  text-align: center;
  width: 100%;
  height: auto;
  display: inline-block;
  position: relative;
}
.site-card-container-thumbnail img {
  max-width: 100%;
  position: static;
}
.site-card-container-site-footer-wrap-site {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-card-container-site-name {
  display: block;
  font-family: PingFangSC-Regular;
  color: #333;
  width: 110px;
  text-overflow: ellipsis;
  // overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
  font-size: 14px;
}
.my-site-options-container {
  background: #f9f9f9;
  height: 40px;
  display: flex;
  justify-content: space-around;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333;
  line-height: 40px;
}
.my-site-options-container .my-site-options-item {
  cursor: pointer;
  position: relative;
}
.my-site-options-container .my-site-options-item .iconfont {
  margin-right: 5px;
}
.my-site-options-container .my-site-bianji,
.my-site-options-container .my-site-chakan {
  font-size: 10px;
  color: #666;
  position: relative;
  z-index: 1;
}
.site-card-container:hover .delicon {
  display: flex;
}
.delicon {
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  color: #ffffff;
  font-size: 30px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: flex-end;
  display: none;

  cursor: pointer;
}
.delicon i {
  // padding-right: 10px;
  // padding-top: 10px;
}
.delicon :hover {
  cursor: pointer;
}
.delicon > span {
  height: 24px;
  line-height: 1;
  background-color: #359eff;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index: 999;
}
.indextag {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 5px;
  font-size: 14px;
  background-color: #359eff;
  color: #ffffff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
</style>
